<template>
  <div>
    <a-card :bordered="false">
      <a-spin :spinning="spinning">
        <FilterTree
          :treeData="paramTree"
          :searchPlaceholder="'请输入样衣号、大货号、版型号、面料号搜索'"
          @updateParams="updateParams"
          @updateSearchText="updateSearchText"
          :initialRootArray="initialFilterArray"
          :useActiveCodeObj="true"
        ></FilterTree>

        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="排序">
                  <a-select v-model="queryParam.sort" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" @change="searchList">
                    <a-select-option v-for="(item, index) in sortList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="仅看启用"> <a-switch v-model="queryParam.isClose" @change="searchList" /> </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24"> <a-button icon="plus" @click="handleImportXls" style="float:right">导入</a-button></a-col>
            </a-row>
          </a-form>
        </div>
      </a-spin>
    </a-card>
    <a-card :bordered="false" :style="{ marginTop: '24px' }" class="list-content">
      <div class="ant-pro-pages-list-projects-cardList" style="clear:both;">
        <a-list :loading="loading" :data-source="goodsList" :grid="{ gutter: 0 }">
          <!-- <div v-if="showLoadingMore" slot="loadMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
              <a-spin v-if="loadingMore" />
              <a-button v-else @click="onLoadMore">
                加载更多
              </a-button>
            </div> -->
          <a-list-item slot="renderItem" slot-scope="item">
            <a-card class="ant-pro-pages-list-projects-card" hoverable>
              <!-- <img slot="cover" :src="item.pic ? item.pic : 'https://img.bzhz.jnbygroup.com/cloth.png'" :alt="item.value" @click="toDetail(item)" /> -->
              <img slot="cover" :src="item.pic ? item.pic : `https://bzhz.jnbygroup.com/jnbyimages/${item.brand}/skc/${item.skc_id}.png`" :alt="item.value" @click="toDetail(item)" />
              <!-- <img slot="cover" :alt="item.value" src="https://img.bzhz.jnbygroup.com/cloth.png" v-else @click="toDetail(item)" /> -->
              <p>样衣号：{{ item.sampleNo }}</p>
              <div class="cardItemContent">
                <h3>{{ item.category }}({{ item.degree }})</h3>
                <p class="title">小品名：{{ item.smallName }}</p>
                <p class="title">版型号：{{ item.modelNumber }}</p>
                <p class="price">引用次数：{{ item.citationNumber }}</p>
              </div>
              <!-- <div class="btn">
                <a-button type="link" icon="edit" :loading="item.iconLoading" @click="editGoodsTags(item, index)" block>编辑标签</a-button>
              </div> -->
            </a-card>
          </a-list-item>
        </a-list>
        <p class="bottom-tip" v-show="showBottom && goodsList.length > 0">
          <a-spin v-if="loadingMore" />
          <span v-else>没有更多啦</span>
        </p>
      </div>
    </a-card>
    <j-import-modal ref="importModal" :url="getImportUrl()" :uploadParams="getUploadParams()" @ok="importOk" :templateUrl="templateUrl()" :serviceId="9"></j-import-modal>
    <goods-detail ref="goodsDetail"></goods-detail>
    <ImportResultModal ref="importResult"></ImportResultModal>
    <a-back-top />
  </div>
</template>
<script>
import { tagMixin } from '../mixins/tagsMixin'
import FilterTree from '@/views/box/components/FilterTree'
import JImportModal from '@/components/qiniuUpload/JImportModal'
import ImportResultModal from '@/components/qiniuUpload/ImportResultModal'
import GoodsDetail from './GoodsDetail'
import globalData from '@/assets/js/common'
import { queryUploadSuccess } from '@/components/qiniuUpload/common'
import { versionLibQueries, versionLibQueryList } from '@/api/goods/index'
export default {
  mixins: [tagMixin],
  data() {
    return {
      spinning: false,
      queryParam: {
        isClose: false,
        sort: 'T'
      },
      sortList: [],
      loading: true,
      loadingMore: true,
      showLoadingMore: false
    }
  },
  components: { FilterTree, JImportModal, GoodsDetail, ImportResultModal },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.spinning = true
      await this.getFilterTree()
      this.spinning = false

      await this.fetchList(this.queryParam)
    },
    getFilterTree() {
      return versionLibQueries().then(res => {
        if (res.code == 0) {
          this.sortList = res.data.filterList
          this.paramTree = [
            {
              children: res.data.brandList.map((item, index) => {
                item.pid = '000' + (20001 + index)
                return item
              }),
              name: '品牌',
              id: '00020000'
            },
            {
              children: res.data.categoryList.map((item, index) => {
                item.pid = '000' + (21000 + index)
                return item
              }),
              name: '类目',
              id: '00021000'
            },
            {
              children: res.data.attributeList.map((item, index) => {
                item.pid = '000' + (22000 + index)
                return item
              }),
              name: '属性',
              id: '00022000'
            }
          ]

          // this.paramTree = JSON.parse(JSON.stringify(res.data))
          for (let item of this.paramTree) {
            Object.assign(item, {
              isMuilt: true,
              isCustom: false,
              checkList: [],
              radioValue: null
            })
            /* if (item.name == '类目') {
              item.toggleNum = 5
              item.toggle = false
            } */
          }
          // 预处理Tree
          this.handleInitalTree(this.paramTree)
          console.log(this.paramTree)
          this.initialFilterArray = this.paramTree.map(e => {
            return {
              checkValue: [],
              codes: [],
              names: [],
              title: e.name
            }
          })
        }
      })
    },
    // 筛选条件
    updateParams(data) {
      console.log(data)
      let paramsArr = data ? JSON.parse(JSON.stringify(data)) : []
      if (paramsArr.length > 0) {
        let brandItem = paramsArr.filter(e => e.title == '品牌')
        this.queryParam.brandList = brandItem[0].codes

        let categoryList = paramsArr.filter(e => e.title == '类目')
        this.queryParam.categoryList = categoryList[0].codes

        let attributeList = paramsArr.filter(e => e.title == '属性')
        this.queryParam.attributeList = attributeList[0].codes

        this.searchList()
      }
    },
    // 搜索
    searchList() {
      this.loading = true
      this.showBottom = false
      this.isRefreshBool = false
      this.current = 1
      this.goodsList = []
      const param = JSON.parse(JSON.stringify(this.queryParam))
      this.fetchList(param)
    },
    fetchList(param) {
      let formData = JSON.parse(JSON.stringify(param))
      formData.isClose = param.isClose ? 0 : 1
      let data = {
        page: {
          pageNo: this.current,
          pageSize: this.pageSize
        },
        requestData: formData
      }

      return versionLibQueryList(data).then(res => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            this.current = res.page.pageNo
            this.total = res.page.count
            this.pages = res.page.pages
            this.currentTotal = this.current * this.pageSize
            const dataList = res.data
            this.loading = false
            this.isRefreshBool = true

            this.goodsList = this.goodsList.concat(dataList)

            if (this.current == this.pages) {
              this.loadingMore = false
              this.showBottom = true
            } else {
              this.showBottom = false
              this.loadingMore = true
            }
          } else {
            this.isRefreshBool = false
            this.loading = false
            this.showButtom = false
            this.loadingMore = false
          }
        }
      })
    },
    toDetail(item) {
      this.$refs.goodsDetail.show(item)
    },
    // 导入
    handleImportXls() {
      this.$refs.importModal.show()
    },
    // 处理上传业务的后台地址
    getImportUrl() {
      return ''
    },
    getUploadParams() {
      // console.log({...globalData.uploadParams})
      return { ...globalData.uploadParams }
    },
    // 上传成功后的方法
    importOk(result) {
      let that = this
      queryUploadSuccess(this.timer, result, 60000, function(x, data) {
        // console.log(x, data)
        if (x == 'done' || x == 'warning') {
          that.$refs.importModal.close()
        }
        if (data.url.includes(';')) {
          let arr = data.url.split(';')
          that.$refs.importResult.show(arr)
        }
      })
    },
    templateUrl() {
      // return 'https://img.bzhz.jnbygroup.com/version-library-sample.xlsx'
      return 'https://img.bzhz.jnbygroup.com/product_version.xlsx'
    }
  }
}
</script>
<style lang="less" scoped>
@import '../tags/less/index.less';
/deep/ .filter-tree {
  padding-bottom: 12px !important;
}
.ant-pro-pages-list-projects-cardList {
  /deep/.ant-card-body {
    min-height: 100px;
    > p {
      margin-top: -46px;
    }
  }
  .cardItemContent {
    min-height: 50px;
  }
}
</style>

